// 基于准备好的dom，初始化echarts实例
var myChart8 = echarts.init(document.getElementById('down2'),'macarons');


var seriesdata1 = [
    [22, 12, 13, 20, 18, 19, 25, 33, 29],
    [30, 32, 35, 33, 40, 36, 30, 28, 39],
    [20, 18, 16, 24, 29, 33, 27, 23, 34],
    [40, 39, 45, 51, 46, 39, 42, 37, 41]
];
//var seriesdata1 = [
//    [
//        2.56,
//        3.78,
//        4.32,
//        5.41,
//        6.99,
//        5.05,
//        4.71,
//        3.45,
//        2.84,
//        1.79,
//        2.52,
//        3.7,
//        4.3,
//        5.29,
//        6.59,
//        5.5,
//        4.7,
//        3.05,
//        2.38,
//        1.84,
//        2.2,
//        3.61,
//        4.4,
//        5.87,
//        6.52,
//        5.19,
//        4.26,
//        3.17,
//        2.84,
//        1.05,
//        2.46
//    ],
//    [
//        4.05,
//        3.46,
//        2.31,
//        1.1,
//        2.5,
//        3.92,
//        4.62,
//        5.7,
//        6.23,
//        5.9,
//        4.23,
//        3.98,
//        2.24,
//        1.25,
//        2.57,
//        3.68,
//        4.4,
//        5.29,
//        6.51,
//        5.33,
//        4.41,
//        3.05,
//        2.78,
//        1.89,
//        2.76,
//        3.87,
//        4.43,
//        5.17,
//        6.39,
//        5.29,
//        4.27
//    ],
//    [
//        1.36,
//        2.21,
//        3.03,
//        4.22,
//        5.36,
//        6.56,
//        5.36,
//        5.36,
//        5.36,
//        4.05,
//        3.22,
//        2.56,
//        1.89,
//        2.67,
//        3.23,
//        4.33,
//        5.45,
//        4.35,
//        3.65,
//        2.35,
//        1.33,
//        2.02,
//        3.66,
//        4.56,
//        5.88,
//        6.66,
//        5.33,
//        4.56,
//        3.66,
//        2.55,
//        1.22,
//        2.66,
//        3.14
//
//    ],
//    [
//        3.56,
//        4.66,
//        5.66,
//        6.66,
//        5.66,
//        4.66,
//        3.66,
//        2.66,
//        1.58,
//        2.55,
//        3.77,
//        4.01,
//        5.32,
//        6.56,
//        5.56,
//        4.65,
//        3.23,
//        2.22,
//        1.56,
//        2.21,
//        3.56,
//        4.32,
//        5.21,
//        6.89,
//        5.03,
//        4.56,
//        3.66,
//        2.55,
//        1.36,
//        2.66,
//        3.14
//    ]
////];
//InitChart(seriesdata1);
InitChart(seriesdata1);
function InitChart(value){
    // 指定图表的配置项和数据
    var option = {
        //title: {
        //    //text: '折线图堆叠'
        //},
        tooltip: {
            trigger: 'axis'
        },

        color:['#FFFF55','#25FFFF','#FE67FD','#FE7000'],//黄，绿，粉，橘
        legend: [
            {
                x:'center',
                top:'1%',
                itemGap: 30,
                data:['XXXXB12 B2a','XXXXB1C2 B2a2'],
                textStyle:{
                    color:'#fff',
                    fontSize:40
                }
            },
            {
                x:'center',
                top:'6%',
                itemGap: 30,
                data:['XXXXB1A B3A','XXXXB1A2 B3A2'],
                textStyle:{
                    color:'#fff',
                    fontSize:40
                }
            }

        ],
        grid: {
            left: '50',
            right: '80',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            color:'#59d4f5',
            type: 'category',
            boundaryGap: false,
            data: ['2018/01','2018/02','2018/03','2018/04','2018/05','2018/06','2018/07'],
            axisLabel:{
                show:true,
                textStyle: {
                    color: '#fff',
                    fontSize:40
                }

            },
            axisLine:{
                lineStyle:{
                    color: '#56f0ed',
                    width:5
                }
            }

        },
        yAxis: {
            name:'(%)',
            type : 'value',
            nameTextStyle:{
                color:"#fff",
                fontSize:40
            },
            min : 0,
            max:100,
            interval:10,
            axisLabel: {
                show: true,
                //interval: 'auto',
                //formatter: '{value}%',
                textStyle: {
                    color: '#fff',
                    fontSize:40
                }
            },
            show: true,
            splitLine:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color: '#56f0ed',
                    width:5
                }
            }
        },
        series: [
            {
                name:'XXXXB12 B2a',
                type:'line',
                //smooth:true,
                symbol: 'circle',
                symbolSize: 25,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width:10// 0.1的线条是非常细的了
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头

                    silent: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {width:1, type: 'solid', color:'#ccc' },
                            label: { show: true, position:'left' }
                        }
                    },
                    data:[
                        { name: '最小值',yAxis:0},
                        { name: '最大值',yAxis:80}
                    ]
                    //data:[{yAxis: 20}]
                },
                //stack: '总量',
                //data:[10, 20, 15, 25, 28, 18, 30, 21,33]
                data:value[0]
            },
            {
                name:'XXXXB1C2 B2a2',
                type:'line',
                //smooth:true,
                symbol: 'circle',
                symbolSize: 25,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width:10// 0.1的线条是非常细的了
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头

                    silent: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {width:1, type: 'solid', color:'#ccc' },
                            label: { show: true, position:'left' }
                        }
                    },
                    //data:[{yAxis: 40}]
                },
                //stack: '总量',
                //data:[30, 40, 38, 50, 60, 40, 60, 55, 70]
                data:value[1]
            },
            {
                name:'XXXXB1A B3A',
                type:'line',
                //smooth:true,
                symbol: 'circle',
                symbolSize: 25,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width:10// 0.1的线条是非常细的了
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头

                    silent: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {width:1, type: 'solid', color:'#ccc' },
                            label: { show: true, position:'left' }
                        }
                    },
                    //data:[{yAxis: 60}]
                },
                //stack: '总量',
                //data:[60, 48, 45, 35, 45, 40, 28, 30, 20]
                data:value[2]
            },
            {
                name:'XXXXB1A2 B3A2',
                type:'line',
                //smooth:true,
                symbol: 'circle',
                symbolSize: 25,
                itemStyle: {
                    normal: {
                        //color:'transparent',
                        //borderColor:'#fc4268',
                        //borderWidth:3,
                        lineStyle: {
                            //color:'#fc4268',
                            width:10// 0.1的线条是非常细的了
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头

                    silent: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {width:1, type: 'solid', color:'#ccc' },
                            label: { show: true, position:'left' }
                        }
                    },
                    //data:[{yAxis: 80}]
                },
                //stack: '总量',
                //data:[52, 68, 62, 68, 80, 66, 77, 75, 85]
                data:value[3]
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表。
    myChart8.setOption(option);
    window.onresize = function() {//监听div和屏幕的改变
        myChart8.resize();//resize属性指定一个元素是否是由用户调整大小的。
    }
}

setInterval(function() {
    var op = myChart8.getOption();
    var data0 = op.series[0].data;
    var data1 = op.series[1].data;
    var data2 = op.series[2].data;
    var data3 = op.series[3].data;

    //data0.shift();
    //data1.shift();
    //data2.shift();
    //data3.shift();

    op.series[0].data.push(data0.shift());
    op.series[1].data.push(data1.shift());
    op.series[2].data.push(data2.shift());
    op.series[3].data.push(data3.shift());
    //op.series[1].data.push(data1);
    //op.series[2].data.push(data2);
    //op.series[3].data.push(data3);

    //i+=4;
    //op.xAxis[0].data.shift();
    myChart8.setOption(op);
}, 5000);
